<template>
  <div>
    <div style="position: relative; width: 15rem;  height: 100vh; overflow: hidden;  ">
      <transition name="slide-fade" mode="out-in">

        <van-form class="po" v-if="!isRegter" @submit="onSubmit">
          <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
            <van-button round block type="info" @click.prevent="isRegter = !isRegter">去注册</van-button>
          </div>
        </van-form>

        <div class="po" v-else>

          <!-- submit  提交     @submit 绑定提交事件 -->
          <van-form @submit="onSubmit2">




            <van-field v-model="username2" name="username2" label="用户名" placeholder="用户名"
              :rules="[{ required: true, message: '用户名已被占用', validator: tocheck }]" />
            <!-- required   是否必填 -->





            <van-field v-model="password2" type="password" name="password" label="密码" placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]" />




            <van-field v-model="password3" type="password" name="password" label="二次密码" placeholder="请确认二次密码"
              :rules="[{ required: true, message: '请确认二次密码', validator: fn }]" />







            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit">提交</van-button>
              <van-button round block type="info" @click.prevent="isRegter = !isRegter">去登录</van-button>
            </div>
          </van-form>
        </div>


      </transition>
    </div>





  </div>
</template>
<script>
import { check, register, loginapi } from "../api/login"

export default {
  data() {
    return {
      isRegter: false,
      username: '',
      username2: "",
      password: '',
      password2: "",
      password3: ""

    };
  },
  methods: {
    // 校验二次密码 
    fn() {
      return this.password2 == this.password3
    },


    // 检验用户名   函数校验 返回true就通过 返回false 就是失败
    async tocheck() {

      console.log(this.username2);
      let result = await check(this.username2)  //返回数据回来
      console.log(result);

      if (result.code == 40001) {
        return false
      } else {
        return true
      }

    },

    //  登录
    async onSubmit(values) {
      console.log('submit', values);
      let result = await loginapi(values)
      console.log(result);
      if (result.status == 1) {
        this.$toast.fail("账号密码错误")
      } else {
        //  存储用户信息
        localStorage.setItem("token", result.token)
        localStorage.setItem("userInfo", JSON.stringify(result.userInfo))
        this.$toast.success("欢迎登录")
        this.$router.replace("/")
      }

    },

    // 注册
    async onSubmit2(val) {
      // console.log("注册了", val);
      let result = await register(this.username2, this.password2)
      console.log(result);
      if (result.status == 0) {
        this.$toast.success(result.message)
        this.isRegter = false
      } else {
        this.$toast.fail(result.message)
      }


    },




    registerfn() {
      console.log(123);
    }
  },
}
</script>

<style lang="scss" scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}

.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,
.slide-fade-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: translateX(10px);
  opacity: 0;
}

.po {
  //  让元素脱离标准流
  position: absolute;
  top: 0;
  left: 0px;
  right: 0px;


}
</style>